<html>
    <head>
        <meta charset="UTF-8">
        <title>学了点这些:</title>
    </head>
    <body>
        <h1>换行</h1>
        刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……<br>
6月8日下午，习近平总书记来到青海省海北藏族自治州刚察县沙柳河镇果洛藏贡麻村，走进牧民索南才让家中，看望慰问藏族群众。
        <hr>
        <h2>段落</h2>
        <p>
            刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……
        </p>
        <p>
            6月8日下午，习近平总书记来到青海省海北藏族自治州刚察县沙柳河镇果洛藏贡麻村，走进牧民索南才让家中，看望慰问藏族群众。
        </p>
        <hr>
        <h3>标签</h3>
            <b>加粗标签</b><br>
            <i>斜体标签</i><br>
            <u>下划线标签</u><br>
            <center>居中标签</center>
            <center>
                <b>居中加粗</b>
            </center>

        <hr>

        <b>
            <center>图片</center>
        </b>
        <img src="file://B:/coding/HnCLearning/html/img/img2.png" width="50%">
        <img src="img/img1.jpg" width="300">
        <center><u>视频</u></center>
        <center><video src = "video/src.mp4" controls width="500"></video></center>
        <br>
        <hr>
        <h1>超链接</h1>
        <font size="10" color="##0000"><u><a href="https://www.baidu.com" target="_blank">百度知道</a></u></font>
        
        <hr>

        <h1>列表</h1>
        <h2>有序列表</h2>
        <ol type="I">
            <li>coffee</li>
            <li>tea</li>
            <li>milk</li>
        </ol>
        
        <h2>无序列表</h2>
        <ul type="circle">
            <li>basketball</li>
            <li>football</li>
            <li>volleyball</li>
        </ul>

        <hr>

        <h1>表格</h1>
        <table border="1" width="500" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>名称</th>
            </tr>
            <tr align="justify">
                <th>1</th>
                <th>mike mike</th>
            </tr>
            <tr align="left">
                <th>2</th>
                <th>milk milk</th>
            </tr>
        </table>
        
        <hr>

        <h1>布局</h1>
        <div><u>div区域</u></div>
        <div>div区域2.0</div>
        <span><i>span区域</i></span>
        <span>span区域2.0</span>
        
        <hr>

        <form action="#" method = "post">
            名字:<input type="text" name="username">
            <br>
            性别:
            <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
            <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
            种族:
            <label><input type="radio" name="race" value="1">人类</label>
            <label><input type="radio" name="race" value="2">非人类</label>
            <br>
            爱好:
            <label><input type="checkbox" name="hobby" value="1">游戏</label>
            <label><input type="checkbox" name="hobby" value="2">游泳</label>
            <label><input type="checkbox" name="hobby" value="3">跑步</label>
            <br>
            头像:   <input type="file">
            <br>
            学历:
            <select name="grade">
                <option>幼儿园</option>
                <option>小学</option>
                <option>初中</option>
            </select>
            <br>
            个人简介:
            <textarea cols="20" rows="5" name="description"></textarea>
            <br>
            <br>
            <input type="submit" value="注册">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
            <input type="submit">
        </form>

        <hr>

        <h1>css测试</h1>
        <div style="color: rebeccapurple">内联样式测试</div>
        <br>
        <h2>内部样式测试</h2>
        <style type="text/css">
            test{
                color:red;
            }
        </style>
        <test>内部样式应用测试1</test>
        <style type="text/css">
            test2{
                color:blue
            }
        </style>
        <test2>内部样式应用测试2</test2>
        <br>
        <h2>外部样式测试</h2>
        <link rel="stylesheet" href="css/demo.css">
        <outtest>外部样式测试</outtest>
        <style>
            #selected{color:blanchedalmond}
        </style>
        <div id="selected">我是被选择的id</div>

    </body>
</html>